<template>
  <div>
    <!-- INFO面包屑 -->
    <bread-crumb-view
      :breadList="breadList"
      style="margin-bottom: 30px"
    ></bread-crumb-view>
    <div style="background: #fff">
      <div class="f"></div>
      <!-- 角色列表 -->
      <roles-from :tableData="tableData" :getRights="getRights"></roles-from>
    </div>
  </div>
</template>

<script>
import BreadCrumbView from "@/components/BreadCrumbView.vue";
import permissions from "@/api/permissions";
import RolesFrom from "./components/RolesFrom.vue";
export default {
  components: { BreadCrumbView, RolesFrom },
  name: "RolesView",

  data() {
    return {
      name: "moumou",
      breadList: ["权限管理", "角色管理"],
      tableData: [],
    };
  },
  methods: {
    init() {
      this.getRights();
    },
    async getRights() {
      let res = await permissions.getRightsRoles();
      console.log(res);
      this.tableData = res;
    },
  },

  created() {
    this.init();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.f {
  display: flex;
  padding: 20px 20px 0;
}
</style>